<template>
  <div>
    <a-button-group>
      <a-button @click="adduser()">
        添加用户
      </a-button>
      <a-button @click="adddept()">添加部门</a-button>
      <a-button @click="addorgan()">添加机构</a-button>
    </a-button-group>
    <selector ref="selectoruser" :typemode="selector.typemode" @confirm="selectorconfirm" :ishide="true"></selector>
    <el-table :data="tableData" class="grid" style="width: 100%">
      <el-table-column label="成员名称" prop="name" fixed> </el-table-column>
      <el-table-column label="成员类型" prop="typename"> </el-table-column>

      <el-table-column align="right" fixed="right" width="280">
        <template slot="header">
          操作
        </template>
        <template slot-scope="record">
          <a class="margin-a" href="javascript:;" style="margin-right: 5px;" @click="delroleuser(record.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentpage" :page-sizes="[10, 20, 30, 40]" :page-size="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
    </el-pagination>

  </div>
</template>
<script>
import { getRoleUser, SaveRoleUser, delRoleMember } from '@/api/tappRole'
import selector from '@/components/selector/index'
export default {
  props: ['selectRoleId'],
  data () {
    return {
      tableData: [],
      pagination: { pagesize: 5, total: 0, currentpage: 1 },
      selector: { title: '人员选择', typemode: 1 }
    }
  },
  components: { selector },
  methods: {
    loadData (pagenum) {
      const param = {
        roleID: this.selectRoleId,
        page: pagenum !== undefined ? pagenum : this.pagination.currentpage,
        rows: this.pagination.pagesize
      }
      getRoleUser(param).then(res => {
        this.tableData = res.data
        this.pagination.total = res.totalcount
      })
      console.log(param)
    },
    adduser () {
      this.selector.title = '人员选择'
      this.selector.typemode = 1
      this.$refs.selectoruser.selectlist = []
      this.$refs.selectoruser.selectsearch()
    },
    adddept () {
      this.selector.title = '部门选择'
      this.selector.typemode = 2
      this.$refs.selectoruser.selectlist = []
      this.$refs.selectoruser.selectsearch()
    },
    addorgan () {
      this.selector.title = '机构选择'
      this.selector.typemode = 3
      this.$refs.selectoruser.selectlist = []
      this.$refs.selectoruser.selectsearch()
    },
    handleSizeChange (val) {
      this.pagination.pagesize = val
      this.loadData(1)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.pagination.currentpage = val
      this.loadData(val)
    },
    delroleuser (rowitem) {
      delRoleMember(rowitem.id).then(res => {
        this.loadData(1)
        console.log(res)
        this.$message.success('删除成功！')
      })
    },
    selectorconfirm (selectlist) {
      if (selectlist.length > 0) {
        const param = {
          ArrNo: '',
          roleID: this.selectRoleId,
          Type: this.selector.typemode - 1
        }
        const arrno = []
        for (let i = 0; i < selectlist.length; i++) {
          arrno.push(selectlist[i].no)
        }
        param.ArrNo = JSON.stringify(arrno)
        SaveRoleUser(param).then(res => {
          this.loadData(1)
          console.log(res)
          this.$message.success('保存成功！')
          this.$refs.selectordialog.visible = false
        })
      }
    }
  },
  mounted () {
    this.loadData(1)
  }
}
</script>
<style>
.ant-modal-body {
  padding-top: 0px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 0px;
}
</style>
<style scoped>
.dialog-footer {
  margin-top: 10px;
  width: 100%;
  text-align: right;
}
.grid {
  min-height: 300px;
}
</style>
